<template>
	<view class="login">
		<view class="loginCode">
			<text>验证码登录</text>
		</view>
		<view class="phone">
			<text>手机号</text>
		</view>
		<view class="phoneLogin">
			<text>+86</text>
			<view class="line"></view>
			<view class="loginInp">
				<input type="text" v-model="userNamePhone" placeholder="请输入手机号" />
			</view>
		</view>
		<view class="getCode">
			<input type="text" placeholder="请输入验证码" v-model="usercodePhone" value="" />
			<button class="codeButn" type="primary" @tap="numberst" :disabled="countdown < 60 && countdown >= 1">
			{{countdown < 60 && countdown >= 1?`${countdown}秒重获`:'获取验证码'}}</button>
		</view>
		<view style="padding-top: 46rpx;" class="phone">
			<text>推荐码</text>
		</view>
		<view class="phoneLogin">
			<view class="loginInp" style="margin-left: 0;">
				<input type="text" v-model="invitationcode" />
			</view>
		</view>
		<view class="sendout">
			<button @click="loginButn()" type="default">登录</button>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="wxLogin">
			<!-- <button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @click="logins()">微信登录</button> -->
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >微信登录</button>
		</view>
		<!-- #endif -->
		 <!-- #ifdef APP-PLUS -->
			<!-- <button style="margin-bottom: 40rpx;background-color: #1aad19;color: #FFFFFF;" @tap="appLogin" >微信登录</button> -->
		<!-- #endif -->
		<view class="agreement">
			<text>点击按钮即为同意用户协议</text>
			<text class="nameAgreement">用户协议</text>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				countdown:60,
				userNamePhone: '',// 手机号
				usercodePhone: '', // 验证码
				invitationcode:'', // 邀请码
				tips: '',
				code: '',
				appletId: '',
				rules: {
					userNamePhone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					usercodePhone: {
						rule: /^[0-9]{4}$/,
						msg: "请输入4位数字验证码"
					}
				}
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
				uni.login({
					success: (res) => {
						var code = res.code;
						const _this = this;
						uni.request({
							url: this.baseurl + '/index.php/api/login/minilogin',
							data: {
								'code': code
							},
							success(res) {
								_this.appletId = res.data.session_key
							}
						})
					}
				});
			//#endif
		},
		methods: {
			...mapMutations(['login']),
			validate(key){
			  let bool = true;
			  if(!this.rules[key].rule.test(this[key])){
				  //提示信息
				  uni.showToast({
					  title:this.rules[key].msg,
					  duration: 2000,
					  icon: "none",
				  })
				  //取反
				  bool=false;
				  return false;
			  }
			  return bool;
			},
			numberst(e) {
				this.countDown();
			},
			countDown(){
				if(!this.validate('userNamePhone')) return;
				let self = this;
				self.countdown = 60;
				self.countdown -= 1;
				uni.showLoading({
					title: '正在获取验证码'
				})
				uni.request({
					url: this.baseurl+'index.php/api/Login/smsSend',
					method:'post',
					data:{
						mobile: this.userNamePhone
					},
					success: (res) => {
						if(res.data.code == '1') {
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.hideLoading();
							uni.showToast({
								  title: res.data.msg,
								  duration: 2000,
								  icon: "none",
							})
						} else {
							uni.hideLoading();
							uni.showToast({
								  title: '发送失败，请稍后再试',
								  duration: 2000,
								  icon: "none",
							})
						}
					}
				})
				if(self.clear){
					clearInterval(self.clear)
				}
				self.clear = null;
				self.clear = setInterval(_ => {
					if(self.countdown > 0){
						self.countdown -= 1;
					}else{
						clearInterval(self.clear)
					}
				},1000)
			},
			  change(e) {
				
			  },
			loginButn() {
				if(!this.validate('userNamePhone')) return;
				if(!this.validate("usercodePhone"))  return;
				uni.showLoading({
				    title: '加载中'  
				});
				uni.request({
					url: this.baseurl+'/index.php/api/Login/login',
					method:'post',
					data:{
						mobile: this.userNamePhone,
						code: this.usercodePhone
					},
					success: (res) => {
						if(res.data.code == '1') {
							uni.hideLoading();
							let userInfo = {
								userName: res.data.data.userinfo.nickname,
								token: res.data.data.userinfo.token,
								avatar: res.data.data.userinfo.avatar,
								mobile: res.data.data.userinfo.mobile,
							}
							this.login(userInfo)
							uni.switchTab({
							    url: "../tabbar-5/personal"
							})
						} else {
							uni.showToast({
								  title: res.data.msg,
								  duration: 2000,
								  icon: "none",
							})
						}
					}
				})
			},
			// logins() {
			// 	uni.getUserProfile({
			// 		desc:"用于完善用户信息",  //必填，声明获取用户个人信息后的用途，不超过30个字符
			// 		success: (res) => {
			// 			console.log(res)
			// 			let wxImg = res.userInfo.avatarUrl
			// 			let wxName = res.userInfo.nickName
			// 		},
			// 		fail: (err) => {
			// 			console.log(err)
			// 			uni.showToast({
			// 				icon:"none",
			// 				title:'用户拒绝获取'
			// 			})
			// 		}  
			// 	})
			// },
			getPhoneNumber(e) {
				// #ifdef MP-WEIXIN
				const _this = this;
				if(e.detail.errMsg === "getPhoneNumber:ok"){
					uni.showLoading({
					    title: '加载中'  
					});
					uni.request({
						 url: this.baseurl + 'index.php/api/login/decryptData',
						  method: 'post',
						  data: {
							'encryptedData': e.detail.encryptedData,
							'iv': e.detail.iv,
							'sessionKey': this.appletId,
						  },
						  success: function (res) {
							 if(res.data.code == 1) {
								 uni.hideLoading();
								 let userInfo = {
								 	userName: res.data.data.userinfo.nickname,
								 	token: res.data.data.userinfo.token,
								 	avatar: res.data.data.userinfo.avatar,
								 	mobile: res.data.data.userinfo.mobile,
								 }
								 _this.login(userInfo)
								 uni.switchTab({
								 	url:'../tabbar-5/personal'
								 })
								 uni.showToast({
								 	  title: res.data.msg,
								 	  duration: 2000,
								 	  icon: "none",
								 })
							 } else {
								uni.showToast({
									  title: res.data.msg,
									  duration: 2000,
									  icon: "none",
								 })
							 }
						 }
					});
			      }else {
			         uni.showToast({
			         	title: "获取手机授权失败",
			         	icon: "none"
			         });
			     }
				 //#endif
			 },
			 // appLogin() {
				// // #ifdef APP-PLUS
				//  var that = this;
				//  uni.getProvider({
				// 	 service: 'oauth',
				// 	 success: function(res) {
				// 		 console.log(res.provider);
				// 		 //支持微信、qq和微博等
				// 		 if (~res.provider.indexOf('weixin')) {
				// 			 uni.login({
				// 				 provider: 'weixin',
				// 				 success: function(loginRes) {
				// 					 console.log("App微信获取用户信息成功", loginRes);
				// 					 // 获取用户信息
				// 					 uni.getUserInfo({
				// 						 provider: 'weixin',
				// 						 success: function(infoRes) {
				// 							 console.log('-------获取微信用户所有-----');
				// 							 console.log(infoRes.userInfo.openId);
				// 							 console.log(JSON.stringify(infoRes.userInfo));
				// 								 // 提交信息
				// 								 // that.wxSubmit(infoRes.userInfo.openId)
												 
				// 						 }
				// 					 });
				// 					 // that.getApploginData(loginRes) //请求登录接口方法
				// 				 },
				// 				 fail: function(res) {
				// 					 console.log("App微信获取用户信息失败", res);
				// 				 }
				// 			 })
				// 		 }
				// 	 }
				//  });
				//  //#endif
			 // },
		}
	}
</script>

<style scoped lang="scss">
	.login {
		height: 100%;
		padding: 0 72rpx;
		.loginCode {
			font-size: 42rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 60rpx;
			padding: 118rpx 0 80rpx 0;
		}
		.phone {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 42rpx;
		}
		.phoneLogin {
			display: flex;
			padding: 44rpx 0 22rpx 0;
			border-bottom: 2rpx solid #979797;
			text {
				display: block;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				padding-top: 6rpx;
			}
			.line {
				height: 54rpx;
				border: 2rpx solid #979797;
				margin-left: 38rpx;
			}
		}
		.loginInp {
			padding: 6rpx 0;
			margin-left: 38rpx;
			input {
				height: 44rpx;
				color: #333333;
			}
		}
		.sendout {
			padding: 60rpx 0;
			button {
				height: 90rpx;
				line-height: 90rpx;
				color: #FFFFFF;
				background-color: rgb(242, 95, 95);
			}
		}
		.agreement {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 0.3);
			line-height: 34rpx;
			text-align: center;
			.nameAgreement {
				color: #F25F5F;
			}
		}
		.getCode {
			display: flex;
			padding: 41rpx 0 22rpx 0;
			border-bottom: 2rpx solid #979797;
			/deep/ uni-input {
				height: 90rpx !important;
			}
			.codeButn {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				background-color: #f25f5f !important;
			}
		}
		.wxLogin {
			margin-bottom: 50rpx;
			button {
				color: #FFFFFF;
				background-color: #1aad19;
			}
		}
	}
	/deep/ .u-demo-block__content {
		padding-bottom: 15rpx;
		border-bottom: 2rpx solid #979797;
	}
	/deep/ .u-input__content__subfix-icon .u-button {
		height: 70rpx !important;
	}
	/deep/ .u-border {
		border: 0 !important;
	}
	input {
		height: 90rpx;
	}
</style>
